<template>

  <div class="wzjl">
    <!--查询表单-->
    <el-form :inline="true" :model="violationQuery" class="demo-form-inline">
      <el-form-item label="违章记录模糊查询：">
        <el-input v-model="violationQuery.carNo" placeholder="请输入车牌号"></el-input>
      </el-form-item>
      <el-form-item>
        <!--查询按钮-->
        <el-button type="primary" @click="getViolationList()">查询</el-button>
        <!--重置按钮-->
        <el-button @click="refresh" type="warning">重置</el-button>
        <!--添加违章记录-->
        <el-button @click="goViolationSave" type="success">新增违章记录</el-button>
        <el-button @click="selectDelete" type="success" :disabled="this.deleteCheckBox.length===0">选中删除</el-button>
      </el-form-item>
    </el-form>

    <!--违章记录列表-->
    <el-table :data="violationList" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="checkboxChange">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column prop="id" label="Id" width="130">
      </el-table-column>
      <el-table-column prop="carNo" label="车牌号码" width="130">
      </el-table-column>
      <el-table-column prop="name" label="驾驶人员" width="130">
      </el-table-column>
      <el-table-column prop="text" label="违章项目" width="130">
      </el-table-column>
      <el-table-column prop="pecDate" label="违章时间" width="130">
      </el-table-column>
      <el-table-column prop="pecPlace" label="违章地点" width="130">
      </el-table-column>
      <el-table-column prop="fine" label="违章罚款" width="130">
      </el-table-column>
      <el-table-column prop="points" label="违章扣分" width="130">
      </el-table-column>
      <el-table-column prop="remarks" label="备注" width="130">
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <router-link :to="'/daily_work/driving_licence_update/'+ scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeViolation(scope.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        :page-size="limit"
        :current-page="current"
        layout="total, prev, pager, next,jumper"
        :total="total"
        style="padding: 30px 0 ; text-align: center"
        @current-change="getViolationList" >
      </el-pagination>
    </div>
  </div>

</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import violationApi from "@/api/violation_cjl_wzjl.js";
export default {
  name: "list",
  data() {
    return {
      deleteCheckBox: [],
      current: 1,
      limit: 4,
      violationQuery: {
      },
      violationList: null,
      total: 0,

      formInline: {
        user: '',
        region: ''
      },

    }
  },
  created() {
    this.getViolationList();
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    onSubmit() {
      console.log('submit!');
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    goViolationSave() {
      this.$router.replace('/daily_work/driving_licence_save')
      // this.$router.push({ path: "/daily_work/driving_licence_save" });
    },
    getViolationList(current = 1) {
      this.current = current
      violationApi
        .pageViolation(this.current, this.limit, this.violationQuery)
        .then((response) => {
          console.log("获取讲师列表成功！");
          this.violationList = response.data.item;
          this.total = response.data.total;
          console.log(this.violationList);
          console.log(this.total);
        })
    },

    refresh() {
      this.violationQuery = {}
      this.getViolationList()
    },

    removeViolation(id) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        violationApi.removeViolation(id).then((response) => {
          this.getViolationList()
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
      })
    },
    checkboxChange(val) {
      console.log("checkbox+++++"+val)
      val.forEach(item => {
        this.deleteCheckBox.push(item.id)
      })
      console.log("选中的checkbox id"+this.deleteCheckBox)
    },

    selectDelete() {
      violationApi.selectCheckBoxDelete(this.deleteCheckBox).then((response) => {
        this.getViolationList()
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      })
    }
  }
}
</script>
